<template>
  <div id="app">
    <div class="box">
      <div>上海</div>
      <div class="box_1">
        <div class="iconfont icon-31sousuo"></div>
        <input type="text" name="" id="" placeholder="搜索品牌，级别">
        <div class="iconfont icon-zhaoxiangji"></div>
      </div>
      <div>
        222
      </div>
    </div>
    <ul class="box_2">
      <li> <router-link :to="{ name: 'xinnengyuan' }">新能源</router-link></li>
      <li><router-link :to="{ name: 'xinche' }">新车</router-link></li>
      <li><router-link :to="{ name: 'haohuapingpai' }">豪华品牌</router-link></li>
    </ul>
    <router-view></router-view>

    <ul class="footer">
      <li> <router-link :to="{ name: 'xinnengyuan' }">
          <img src="../img/新车.jpg" alt="">
          <p>新车</p>
        </router-link></li>
      <li><router-link :to="{ name: 'xinche' }">
          <img src="../img/新能源.jpg" alt="">
          <p>新能源</p>
        </router-link></li>
      <li><router-link :to="{ name: 'faxian' }">
          <img src="../img/发现.jpg" alt="">
          <p>发现</p>
        </router-link></li>

        <li><router-link :to="{ name: 'ershou' }">
          <img src="../img/二手车.jpg" alt="">
          <p>二手车</p>
        </router-link></li>
        <li><router-link :to="{ name: 'me' }">
          <img src="../img/我的.jpg" alt="">
          <p>我的</p>
        </router-link></li>
    </ul>


  </div>
</template>

<script>


export default {
  name: 'App',
  components: {

  }
}
</script >

<style lang="scss">
#app {
  font-size: 14px;

  .box_2 {
    display: flex;

    li {
      margin-left: 20px;
    }
  }

  .box {
    display: flex;
    // background-color: aqua;
    justify-content: space-between;
    align-items: center;

    .box_1 {
      display: flex;
      align-items: center;
      width: 400px;
      height: 80px;
      border: 1px solid red;

      input {
        height: 100%;
        width: 100%;
        outline: none;
        border: none;
      }
    }

  }
  .footer{
    width: 100%;

    position: fixed;
   bottom: 0px;
   left: 0px; 
    display: flex;
    text-align: center;
   
    justify-content: space-around;

    
    li{
      text-decoration: none;
      justify-content: space-around;
    
      img{
        width: 40px;
        height: 40px;
      }
    }
  }
}
</style>
